<template>
  <div class="configLogin pn fill">
    <div class="section">
      <div class="sectionTitle">管理你登录设备的方式</div>
      <div class="sectionSubTitle">当前登录方式: 无</div>
      <div class="sectionMain">
        <ul class="loginType mnt">
          <li class="flex-col pny" :class="{active: active===0}" @click="handleActive(0)">
            <div class="label flex-row items-center">
              <i class="iconfont icon-renlianshibie"/>
              <div class="flex-col justify-between">
                <div class="title">Windows Hello 人脸</div>
                <div class="sub text-warning cursor-pointer">此选项当前不可用-单击已了解详细信息</div>
              </div>
            </div>
            <div class="detail" v-if="active===0">
              <span class="text-danger pll">找不到支持Windows Hello 人脸的摄像头</span>
            </div>
          </li>
          <li class="flex-col pny" :class="{active: active===1}" @click="handleActive(1)">
            <div class="label flex-row items-center">
              <i style="font-size: 30px;" class="iconfont icon-zhiwen pnx"/>
              <div class="flex-col justify-between">
                <div class="title">Windows Hello 指纹</div>
                <div class="sub text-warning cursor-pointer">此选项当前不可用-单击已了解详细信息</div>
              </div>
            </div>
            <div class="detail" v-if="active===1">
              <span class="text-danger pll">找不到支持Windows Hello 指纹的指纹识别器</span>
            </div>
          </li>
          <li class="flex-col pny" :class="{active: active===2}" @click="handleActive(2)">
            <div class="label flex-row items-center">
              <i style="font-size: 30px;" class="iconfont icon-jianpankeyboard48 pnx"/>
              <div class="flex-col justify-between">
                <div class="title">Windows Hello PIN</div>
                <div class="sub text-warning cursor-pointer">此选项当前不可用-单击已了解详细信息</div>
              </div>
            </div>
            <div class="detail" v-if="active===2">
              <span class="text-danger pll">请先登录</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ConfigLogin",
  data: () => ({
    active: null,
  }),
  methods:{
    handleActive(index){
      this.active = index
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.configLogin {
  line-height: 1.2;
}

.sectionTitle {
  font-weight: 600;
  font-size: $fz-nx;
  line-height: 1.5;
}

.sectionSubTitle {
  color: $text-info;
}
ul.loginType{
  li{
    margin: $mn 0;
    &:hover{
      background-color: #f2f2f2;
    }
    .label{
      i{
        font-size: 50px;
      }
    }
  }
  .active{
    background-color: #f2f2f2;

  }
}
</style>
